<template>
	<a-card>
		<div class="title-border pl-2">拓客</div>
		<div class="flex flex-wrap">
			<div
				v-if="hasMenu('bizRecycle')"
				class="m-4 p-2 w-[240px] h-[150px] flex flex-col justify-center border-[1px] border-solid border-zinc-300 rounded-md cursor-pointer"
				@click="routerToUrl('/biz/recycle/index')"
			>
				<div class="ml-8 mb-2 text-[16px]">资源回收</div>
				<div class="ml-8 mb-8 text-stone-400 text-[13px]">拓客资源回收设置</div>
			</div>
			<div
				v-if="hasMenu('bizCluePush')"
				class="m-4 p-2 w-[240px] h-[150px] flex flex-col justify-center border-[1px] border-solid border-zinc-300 rounded-md cursor-pointer"
				@click="onClueHighSeasSet"
			>
				<div class="ml-8 mb-2 text-[16px]">外部线索推送</div>
				<div class="ml-8 mb-8 text-stone-400 text-[13px]">设置外部线索指定推送公海</div>
			</div>
		</div>
		<br />
		<div class="title-border pl-2">客户</div>
		<div class="flex flex-wrap">
			<!--			<div-->
			<!--				v-if="hasMenu('bizCustomerSource')"-->
			<!--				class="m-4 p-2 w-[240px] h-[150px] flex flex-col justify-center border-[1px] border-solid border-zinc-300 rounded-md cursor-pointer"-->
			<!--				@click="routerToUrl('/biz/customerSource/index')"-->
			<!--			>-->
			<!--				<div class="ml-8 mb-2 text-[16px]">客户来源</div>-->
			<!--				<div class="ml-8 mb-8 text-stone-400 text-[13px]">客户来源设置</div>-->
			<!--			</div>-->
			<div
				v-if="hasMenu('bizCustomerLevel')"
				class="m-4 p-2 w-[240px] h-[150px] flex flex-col justify-center border-[1px] border-solid border-zinc-300 rounded-md cursor-pointer"
				@click="routerToUrl('/biz/customerLevel/index')"
			>
				<div class="ml-8 mb-2 text-[16px]">客户等级</div>
				<div class="ml-8 mb-8 text-stone-400 text-[13px]">客户等级设置</div>
			</div>
			<div
				v-if="hasMenu('bizCustomerRetention')"
				class="m-4 p-2 w-[240px] h-[150px] flex flex-col justify-center border-[1px] border-solid border-zinc-300 rounded-md cursor-pointer"
				@click="routerToUrl('/biz/customerRetention/index')"
			>
				<div class="ml-8 mb-2 text-[16px]">客户保有量</div>
				<div class="ml-8 mb-8 text-stone-400 text-[13px]">客户私海保有量设置</div>
			</div>
			<!--			<div-->
			<!--				v-if="hasMenu('bizPersonSwapRule')"-->
			<!--				class="m-4 p-2 w-[240px] h-[150px] flex flex-col justify-center border-[1px] border-solid border-zinc-300 rounded-md cursor-pointer"-->
			<!--				@click="routerToUrl('/biz/personSwapRule/index')"-->
			<!--			>-->
			<!--				<div class="ml-8 mb-2 text-[16px]">人员掉保规则</div>-->
			<!--				<div class="ml-8 mb-8 text-stone-400 text-[13px]">人员掉保规则设置</div>-->
			<!--			</div>-->
			<div
				v-if="hasMenu('bizDeleteReason')"
				class="m-4 p-2 w-[240px] h-[150px] flex flex-col justify-center border-[1px] border-solid border-zinc-300 rounded-md cursor-pointer"
				@click="routerToUrl('/biz/deleteReason/index')"
			>
				<div class="ml-8 mb-2 text-[16px]">删除原因</div>
				<div class="ml-8 mb-8 text-stone-400 text-[13px]">客户删除原因设置</div>
			</div>
			<div
				v-if="hasMenu('bizCustomerHighSeas')"
				class="m-4 p-2 w-[240px] h-[150px] flex flex-col justify-center border-[1px] border-solid border-zinc-300 rounded-md cursor-pointer"
				@click="routerToUrl('/biz/customerHighSeas/index')"
			>
				<div class="ml-8 mb-2 text-[16px]">客户公海</div>
				<div class="ml-8 mb-8 text-stone-400 text-[13px]">客户公海设置</div>
			</div>
			<div
				v-if="hasMenu('bizClueHighSeas')"
				class="m-4 p-2 w-[240px] h-[150px] flex flex-col justify-center border-[1px] border-solid border-zinc-300 rounded-md cursor-pointer"
				@click="routerToUrl('/biz/clueHighSeas/index')"
			>
				<div class="ml-8 mb-2 text-[16px]">线索公海</div>
				<div class="ml-8 mb-8 text-stone-400 text-[13px]">线索公海设置</div>
			</div>
			<div
				v-if="hasMenu('bizContactEnterRule')"
				class="m-4 p-2 w-[240px] h-[150px] flex flex-col justify-center border-[1px] border-solid border-zinc-300 rounded-md cursor-pointer"
				@click="routerToUrl('/biz/contactEnterRule/index')"
			>
				<div class="ml-8 mb-2 text-[16px]">联系人录入规则</div>
				<div class="ml-8 mb-8 text-stone-400 text-[13px]">线索/客户联系人验重规则设置</div>
			</div>
		</div>
	</a-card>

	<clue-modal ref="clueModalRef" />
</template>

<script setup>
	import clueModal from './modal/clueModal.vue'
	import { useRouter } from 'vue-router'

	const router = new useRouter()

	const clueModalRef = ref(null)

	const onClueHighSeasSet = () => {
		clueModalRef.value.onOpen()
	}

	const routerToUrl = (url) => {
		router.push(url)
	}
</script>

<style scoped>
	.title-border {
		border-left: 4px solid #0d84ff;
	}
</style>
